<template>
	<view>
		<view class="body">
			<view :class="show_attr_picker || show || no_scroll ? 'no-scroll' : ''">
				<view style="padding-bottom: 120rpx">
					<swiper :autoplay="autoplay" :circular="true" class="goods-image-swiper" duration="300"
						indicatorActiveColor="#ff5c5c" :indicatorDots="true" interval="5000">
						<swiper-item v-for="(item, index) in goods.goods_thumb">
							<image @tap="onGoodsImageClick" class="goods-image" :data-index="index" mode="aspectFill"
								:src="item"></image>
						</swiper-item>
					</swiper>
					<view class="goods_info_box">
						<view class="goods_name">{{ goods.goods.goods_name }}</view>
						<view class="flex-row flex-y-center store_goods_info">
							<view class="flex-grow-1 flex-col">

								<view class="flex-grow-0 flex-y-center view1">

									<text class="min_price">￥{{ goods.goods.goods_shop_price }}</text>
								</view>
								<view class="flex-row flex-y-center" style="margin-top: 14rpx">
									<view class="flex-grow-0 view2">
										<text class="original_price">
											￥{{ goods.goods.goods_scribing_price }}
										</text>
									</view>
									<view class="flex-grow-0 view2">
										<text class="sales">销量：</text>
										<text class="sales">{{ goods.goods.goods_sales }}</text>
									</view>
								</view>
							</view>
							<view class="flex-grow-0">
								<button open-type="share" class="share_btn" :plain="true">
									<image class="img" src="/static/images/icon-share.png"></image>
									<view class="share">分享</view>
								</button>
							</view>
						</view>
					</view>
					<view class="mb-20"></view>
					<!-- 套餐 -->
					<view class="box2" v-if="goods.goods && goods.goods.goods_type == 2">
						<view class="name">套餐</view>
						<view class="item flex">

							<view class="flex-grow-1">
								<view class="flex-y-center line" v-for="(item, index) in collocation" :key="index">
									<view class="flex-grow-1">{{ item.name }}</view>

									<view class="num flex-grow-0">({{item.num}}{{ item.unit }})</view>

									<view class="price flex-grow-0">￥{{ item.price }}</view>
								</view>
							</view>
						</view>
					</view>

					<view class="mb-20"></view>
					<view @tap="showAttrPicker" class="flex-row flex-y-center select_attrs"
						v-if="goods.goods && goods.goods.goods_type == 1">
						<view class="flex-grow-1 flex-row flex-y-center">
							<text>选择</text>
							<text class="attrs">规格</text>
						</view>
						<view class="flex-grow-0">
							<image class="img" src="/static/images/icon-jiantou-r.png"></image>
						</view>
					</view>
					<view class="mb-20"></view>
					<!-- 购买须知 -->
					<view class="box3" v-if="goods.goods.goods_instructions">
						<view class="name">购买须知</view>
						<view class="item flex">
							<view class="flex-grow-1">
								<view class="flex text">
									<view class="dot flex-grow-0">•</view>
									<view>{{goods.goods.goods_instructions}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="box3" v-if="goods.goods.goods_tips">
						<view class="name">温馨提示</view>
						<view class="item flex">
							<view class="flex-grow-1">
								<view class="flex text">
									<view class="dot flex-grow-0">•</view>
									<view>{{goods.goods.goods_tips}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="mb-20"></view>
					<view class="tab-group">
						<view class="flex-row tab-group-header">
							<view @tap="tabSwitch" :class="'flex-grow-1 flex-x-center tab-group-item ' + tab_detail"
								data-tab="detail">
								<text class="flex-y-center">商品详情</text>
							</view>
							<view @tap="tabSwitch" :class="'flex-grow-1 flex-x-center tab-group-item ' + tab_comment"
								data-tab="comment" v-if="__is_comment">
								<text class="flex-y-center">评价</text>
							</view>
						</view>
						<view class="tab-group-body">
							<view :class="'tab-group-item ' + tab_detail">
								<view class="goods-detail">
									<image v-for="(item,index) in goods.goods_album_img" :src="item" mode="widthFix"
										style="width: 100%;display: block;" @tap="previewImages(index)"></image>
								</view>
							</view>
							<view :class="'tab-group-item ' + tab_comment">
								<view class="comment-list">
									<view class="comment-item flex-row" v-for="(item, index) in comment_list"
										:key="item.id">
										<view class="flex-grow-0" style="overflow: visible">
											<image mode="aspectFill" :src="item.user.avatar"
												style="width: 70rpx; height: 70rpx; border-radius: 1000rpx"></image>
										</view>

										<view class="flex-grow-1">
											<view class="flex-row mb-20">
												<view class="flex-grow-1 flex-y-center nickname">
													{{ item.user.nickname }}
												</view>
												<view class="flex-grow-0 flex-y-center addtime">{{ item.createtime }}
												</view>
											</view>
											<view class="mb-20">{{ item.content }}</view>
											<view class="pic-list" v-if="item.images && item.images.length > 0">
												<image @tap="commentPicView(index,pic_index)" class="pic-item"
													:data-index="index" :data-pic-index="pic_index" mode="aspectFill"
													:src="img" v-for="(img, pic_index) in item.images"></image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
				<block>
					<view class="flex-row bar-bottom" v-if="__user_info.blacklist !== 1">
						<view class="flex-grow-0 flex-row">
							<navigator class="flex-grow-0 flex-y-center bar-bottom-btn" openType="redirect"
								:url="'/pages2/group/merchant/merchant?id='+goods.goods.store_id">
								<view>
									<image src="/static/images/icon-store.png"></image>
									<text>店铺</text>
								</view>
							</navigator>
							<view @tap="favoriteAdd" class="flex-grow-0 flex-y-center bar-bottom-btn">
								<view>
									<image v-if="goods.is_favorite==1" src="/static/images/icon-favorite-active.png"></image>
									<image v-else src="/static/images/icon-favorite.png"></image>
									<text>{{goods.is_favorite==1?'已收藏':'收藏'}}</text>
								</view>
							</view>
						</view>
						<view class="flex-grow-1 flex-row">
							<view @tap="buyNow" class="flex-grow-1 flex-y-center flex-x-center buy-now">立即购买</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<!-- 选择规格弹窗 -->
		<view :class="'attr-picker ' + (showattr ? 'show' : 'hide')">
			<view class="content-box">
				<view class="flex-row" style="padding: 24rpx 28rpx">
					<view class="flex-grow-0">
						<view class="goods-pic-box">
							<image mode="aspectFill" :src="goods.goods_thumb"
								:data-url="goods.goods.goods_thumb" @tap="clickImg"></image>
						</view>
					</view>
					<view class="flex-grow-1" style="padding: 0 24rpx">
						<view style="color: #cc3433; margin-bottom: 12rpx; font-weight: bold; font-size: 1rem">
							￥{{ sku_price ? sku_price : goods.goods.goods_shop_price }}</view>
						<view style="color: #cc3433">
							{{ sku_name }}
						</view>
					</view>
					<view class="flex-grow-0">
						<view @tap="hideAttrPicker" class="flex-x-center flex-y-center"
							style="width: 100rpx; height: 100rpx">
							<image src="/static/images/icon-close.png" style="width: 30rpx; height: 30rpx"></image>
						</view>
					</view>
				</view>
				<scroll-view :scrollY="true" style="max-height: 650rpx">
					<view style="padding: 24rpx 28rpx">
						<view v-for="(item, index) in specs">
							<view class="attr-group">
								<view class="attr-group-name">{{ item.title }}</view>
								<view class="attr-list">
									<text @tap="attrClick(index,i,$event)"
										:class="'attr-item ' + (v.check ? 'active' : '')" v-for="(v, i) in item.attr_list">
										{{ v.name }}
									</text>
								</view>
							</view>
						</view>
						<view style="height: 0; border-bottom: 1rpx solid #e3e3e3; margin-bottom: 40rpx"></view>
						<view style="padding-bottom: 40rpx">
							<view class="flex-row flex-y-center mb-20">
								<view class="flex-grow-1">数量</view>
								<view class="flex-grow-0">
									<view class="flex-row number-input-box">
										<view @tap="numberSub"
											class="flex-grow-0 flex-x-center flex-y-center number-btn number-sub">-
										</view>
										<view class="flex-grow-0">
											<input @blur="numberBlur" class="flex-grow-1 number-input" min="1" step="1"
												type="number" :disabled="true" :value="number" />
										</view>
										<view @tap="numberAdd"
											class="flex-grow-0 flex-x-center flex-y-center number-btn number-add">+
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		Index
	} from '../../../apirequest/index-model.js';
	var i = new Index();
	import {
		Cart
	} from '../../../apirequest/cart-model.js';
	var c = new Cart();
	import {
		Goods
	} from '../../../apirequest/goods-model.js';
	var g = new Goods();
	export default {
		data() {
			return {
				parameter: [], //属性
				hide: 'hide',
				show: false,
				show_attr_picker: false,
				__is_comment: 1,
				__is_member_price: 0,
				__is_sales: 1,
				__is_share_price: 1,
				goods: {},
				share_modal_active: '',
				no_scroll: false,
				tab_comment: '',
				tab_detail: 'active',
				comment_list: [],
				page: 1,
				has_more: true,
				url: '',
				comment_counts: [],
				sku: [],
				skuprice: [],
				spec: '',
				rule: [],
				showattr: false,
				number: 1,
				is_buy: false,
				sku_price: 0.00,
				sku_name:'',
				sku_unit:'',
				sku_id:'',
				id: 0,
				// product: [{
				// 	name: '香辣翅膀排骨',
				// 	num: '1',
				// 	price: '88'
				// }, {
				// 	name: '鱿鱼粉丝煲',
				// 	num: '1',
				// 	price: '26'
				// }, {
				// 	name: '肉末南瓜煲',
				// 	num: '1',
				// 	price: '26'
				// }, {
				// 	name: '餐位（含水果、开胃菜、茶水、米饭、粥品）',
				// 	num: '3',
				// 	price: '12'
				// }]
				collocation:[],
				specs:[],
				collocation_ids:''
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
			}
			if (options.uid) {
				uni.setStorageSync('pid', options.uid)
			}
			if (options.scene) {
				var options = decodeURIComponent(options.scene)
				var arr = options.split('&');
				this.id = arr[0].split('=')[1]
				uni.setStorageSync('pid', arr[1].split('=')[1])

			}
			this._index();
			this._getCommentList();
		},
		onReachBottom() {
			if (this.tab_comment == 'active') {
				this._getCommentList();
			}

		},
		onShareAppMessage() {
			var user = wx.getStorageSync('userinfo');
			var product = this.goods
			return {
				title: product.goods.goods_name,
				path: '/pages2/shop/goods-detail2/goods-detail2?id=' + product.goods.id + '&uid=' + user['id'],
				imageUrl: product.goods_thumb[0]
			}
		},
		onShareTimeline() {
			var user = wx.getStorageSync('userinfo');
			var product = this.goods
			return {
				title: product.goods.goods_name,
				query: 'id=' + product.goods.id + '&uid=' + user['id'],
				imageUrl: product.goods_thumb[0]
			}
		},
		methods: {
			_index() {
				var that = this;
				g.goodsDetail({
					goods_id: this.id,
					type:'user'
				}, (res) => {
					if (res.code == 1) {
						res.data.goods.is_favorite=res.data.goods.is_favorite==1?1:0;
						that.goods = res.data
						that.collocation = res.data.collocation
						that.collocation_ids = res.data.collocation_ids
						that.specs = res.data.specs
						if(that.specs.length>0 && that.specs[0].attr_list.length > 0){
							that.specs.forEach((v,k)=>{
								that.specs[k].attr_list[0].check = true
								that.sku_price += parseFloat(that.specs[k].attr_list[0].price)
								that.sku_name += that.specs[k].attr_list[0].name + " "
								that.sku_id += that.specs[k].attr_list[0].id + ","
							})
							that.sku_unit = that.specs[0].attr_list[0].unit
						}
					} else {
						uni.showToast({
							title: '产品已下架',
							icon: 'none'
						})
						setTimeout(function(){
							uni.navigateBack({
								delta:1
							})
						},1500);
					}
				})
				i.get_comment_counts({
					id: this.id
				}, (res) => {
					if (res.code == 1) {
						that.comment_counts = res.data
					}
				})
			},
			_getCommentList() {
				var that = this;
				if (!this.has_more) {
					return false;
				}
				var page = this.page;
				i.get_comment_list({
					id: this.id,
					page: page
				}, (res) => {
					if (res.code == 1) {
						that.comment_list = that.comment_list.concat(res.data.data)
						that.has_more = res.data.has_more
						that.page = page + 1;
					}
				})
			},
			tocart() {
				uni.switchTab({
					url: "/pages2/shop/cart/cart"
				})
			},
			numberAdd: function() {
				var that = this;
				var number = that.number;
				number++;
				// var product = this.product;
				// var spec = this.spec;
				// if ((spec && number > spec.stock) || (!spec && number > product.inventory)) {
				// 	uni.showToast({
				// 		title: '超出库存了哦',
				// 		icon: 'none'
				// 	});
				// 	return false;
				// }
				that.number = number

			},

			numberSub: function() {
				var that = this;
				var number = that.number;
				number--;
				// if (this.spec && this.spec.buy_start_qty > 0) {
				// 	if (number < this.spec.buy_start_qty) {
				// 		uni.showToast({
				// 			title: '该规格产品起购数量为' + this.spec.buy_start_qty,
				// 			icon: 'none'
				// 		});
				// 		return;
				// 	}
				// }
				if (number == 0) {
					uni.showToast({
						title: '不能再减了哦~~',
						icon: 'none'
					});
					return;
				}
				that.number = number

			},

			attrClick: function(i1, i2, e) {
				// var sku = this.sku;
				// var skuprice = this.skuprice;
				// var spec = [];
				// var is_disabled = false;
				// var rule = this.rule;
				// var rules = [];
				// rule.forEach((v, k) => {
				// 	if (k == i1) {
				// 		rules[k] = sku[i1].child[i2].name;
				// 	} else {
				// 		rules[k] = v;
				// 	}
				// })

				// skuprice.forEach(function(v, k) {
				// 	var text = rules.join('&');
				// 	if (text == v.product_sku_text) {
				// 		spec = v;
				// 		if (v.status == 0) {
				// 			is_disabled = true;
				// 		}
				// 	}
				// });
				// if (is_disabled) {
				// 	uni.showToast({
				// 		title: '该规格产品暂时缺货',
				// 		icon: 'none'
				// 	})
				// } else {
				// 	sku[i1].child.forEach(function(v, k) {
				// 		sku[i1].child[k].check = false;
				// 	});
				// 	sku[i1].child[i2].check = true;

				// 	this.sku = sku
				// 	this.rule = rules
				// 	this.spec = spec

				// }
				var sku = this.specs
				sku[i1].attr_list.forEach(function(v, k) {
					sku[i1].attr_list[k].check = false;
				});
				sku[i1].attr_list[i2].check = true;
				var a = 0
				var name = ''
				var id = ''
				sku.forEach(function(v1, k1) {
					sku[k1].attr_list.forEach(function(vv, kk) {
						if(sku[k1].attr_list[kk].check) {
							a += parseFloat(sku[k1].attr_list[kk].price)
							name += sku[k1].attr_list[kk].name + " "
							id += sku[k1].attr_list[kk].id + ","
						}
						
					});
				});
				this.specs = sku
				this.sku_price = a.toFixed(2)
				this.sku_name = name
				this.sku_id = id
			},

			hideAttrPicker: function() {
				this.showattr = false
				this.is_buy = false
			},
			buyNow() {
				if (!uni.getStorageSync('userinfo')) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/login/login"
						})
					})
					return false;
				}
				 if (this.is_buy) {
					 this.showattr = false
					 this.is_buy = false
					 var param = {};
					 param.store_id = this.id
					 param.goods_id = this.goods.goods.id
					 param.goods_name = this.goods.goods.goods_name
					 param.goods_thumb = this.goods.goods_thumb
					 param.goods_type = this.goods.goods.goods_type
					 if(this.goods.goods.goods_type == 1) {
					 	param.goods_specs_id = this.sku_id
						param.goods_specs_name = this.sku_name
					 	param.goods_collocation_id = ''
					 	param.number = this.number
					 	param.price = this.sku_price
					 }else{
					 	param.goods_specs_id = 0
						param.goods_specs_name = ''
						param.goods_collocation = this.collocation
					 	param.goods_collocation_id = this.collocation_ids
					 	param.number = this.number
					 	param.price = this.goods.goods.goods_shop_price
					 }
					 uni.navigateTo({
					 	url: "/pages2/shop/order-submit2/order-submit2?param=" + encodeURIComponent(JSON.stringify(param))
					 })		
				// 	var sid = 0;
				// 	var stock = this.goods.inventory
				// 	if (this.spec) {
				// 		sid = this.spec.id
				// 		stock = this.spec.stock;
				// 	}
				// 	if (this.number > stock) {
				// 		uni.showToast({
				// 			title: '该规格产品库存不足',
				// 			icon: 'none'
				// 		});
				// 		return false;

				// 	}
				// 	if (this.spec && this.spec.buy_start_qty > 0) {
				// 		if (this.number < this.spec.buy_start_qty) {
				// 			uni.showToast({
				// 				title: '该规格产品起购数量为' + this.spec.buy_start_qty,
				// 				icon: 'none'
				// 			});
				// 			return false;
				// 		}
				// 	}
				// 	c.add_cart({
				// 		pid: this.id,
				// 		n: this.number,
				// 		sid: sid,
				// 		type: 2
				// 	}, (res) => {
				// 		if (res.code == 1) {

				// 			this.showattr = false
				// 			this.is_buy = false
				// 			uni.navigateTo({
				// 				url: "/pages2/shop/order-submit2/order-submit2?cart_ids=" + res.data
				// 			})
				// 		} else {
				// 			uni.showToast({
				// 				title: res.msg,
				// 				icon: 'none'
				// 			})
				// 		}
				// 	})

				} else {
					this.showattr = true
					this.is_buy = true
				}
			},

			// 图片预览
			previewImages(index) {
				// 拿到图片的地址url
				let images = this.goods.detailImgList
				// 微信预览图片的方法
				uni.previewImage({
					current: images[index], // 图片的地址url
					urls: images // 预览的地址url
				})
			},
			//评论图片预览
			commentPicView(inx, index) {
				// 拿到图片的地址url
				let images = this.comment_list[inx].images
				// 微信预览图片的方法
				uni.previewImage({
					current: images[index], // 图片的地址url
					urls: images // 预览的地址url
				})
			},

			tabSwitch: function(t) {
				if ('detail' == t.currentTarget.dataset.tab) {
					this.tab_detail = "active"
					this.tab_comment = ''
				} else {
					this.tab_detail = ""
					this.tab_comment = 'active'
				}
			},
			showAttrPicker: function() {
				this.showattr = true
				this.is_buy = true
			},
			previewImage: function(t) {
				var a = t.currentTarget.dataset.url;
				uni.previewImage({
					urls: [a]
				});
			},
			favoriteAdd() {
				var that = this;
				c.collect({
					id: this.id,type:2
				}, (res) => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code == 1) {
						var goods = that.goods
						goods.is_favorite = res.data == 1?1:0
						that.goods = goods
					}
				})
			},

		}
	}
</script>

<style>
	view {
		overflow: visible;
	}

	.no-scroll {
		height: 100%;
		overflow-y: hidden;
	}

	.goods-detail {
		box-sizing: border-box;
		padding: 24rpx 0;
		background: #fff;
	}

	.goods-detail text,
	.goods-detail image,
	.goods-detail view {
		box-sizing: border-box;
		max-width: 100%;
	}

	.tab-group .tab-group-header {
		background: #fff;
		border-bottom: 1rpx solid #e3e3e3;
	}

	.tab-group .tab-group-header .tab-group-item text {
		height: 100rpx;
		border-bottom: 2rpx solid transparent;
	}

	.tab-group .tab-group-header .tab-group-item.active text {
		color: #ff4544;
		border-bottom-color: #ff4544;
	}

	.tab-group .tab-group-body .tab-group-item {
		display: none;
	}

	.tab-group .tab-group-body .tab-group-item.active {
		display: block;
	}

	.comment-count {
		background: #fff;
		margin-bottom: 20rpx;
	}

	.comment-count .comment-count-item {
		text-align: center;
		padding: 20rpx 0;
		font-size: 9pt;
	}

	.comment-item {
		background: #fff;
		border-bottom: 1rpx solid #e3e3e3;
		padding: 32rpx 24rpx;
	}

	.comment-item .nickname {
		padding-left: 24rpx;
		height: 70rpx;
		font-weight: bolder;
	}

	.comment-item .addtime {
		color: #888;
	}

	.comment-item .pic-list {
		margin-left: -8rpx;
		margin-top: -8rpx;
	}

	.comment-item .pic-item {
		width: 200rpx;
		height: 200rpx;
		margin-left: 8rpx;
		margin-top: 8rpx;
		display: inline-block;
	}

	.reply {
		margin: 20rpx 24rpx 20rpx 0rpx;
		border-radius: 16rpx;
		background: #f7f7f7;
		font-size: 11pt;
		padding: 22rpx 30rpx;
		color: #ff4544;
	}

	.reply-content {
		display: inline;
		color: #666666;
	}

	.comment-item .score-tag {
		display: inline-block;
		background: #eee;
		font-size: 9pt;
		padding: 4rpx 12rpx;
		border-radius: 5rpx;
	}

	.hide {
		display: none;
	}

	.rule-pop {
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		top: 0;
		left: 0;
		z-index: 999;
	}

	.rule-pop .box {
		background: #fff;
		border-radius: 10rpx;
		width: 75%;
		padding: 20rpx;
	}

	.rule-pop .box .title {
		font-size: 1rem;
		margin: 20rpx 0;
		text-align: center;
		font-weight: 700;
	}

	.rule-pop .box .text {
		line-height: 40rpx;
		color: #333;
		font-size: 0.85rem;
	}

	.rule-pop .box .closeicon {
		margin-bottom: -111rpx;
		width: 60rpx;
		height: 60rpx;
	}

	.goods-image-swiper {
		height: 750rpx;
		position: relative;
	}

	.goods-image-swiper image {
		height: 750rpx;
	}

	.goods-image {
		width: 100%;
		height: 100%;
	}

	.share_commission {
		height: 80rpx;
		width: 220rpx;
		position: absolute;
		right: 0;
		bottom: 80rpx;
		border-top-left-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.share_commission .img {
		width: 44rpx;
		height: 44rpx;
		margin-right: 14rpx;
		margin-left: 20rpx;
	}

	.share_commission .text_box {
		font-size: 7pt;
		color: #fff;
	}

	.share_commission .text2 {
		font-weight: bold;
	}

	.goods-image-swiper .play {
		width: 150rpx;
		height: 150rpx;
		position: absolute;
		top: 275rpx;
		left: 300rpx;
	}

	.bar-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		box-shadow: 0 0 3rpx rgba(0, 0, 0, 0.2);
		height: 110rpx;
	}

	.bar-bottom-btn {
		border: none;
		background: #fff;
		font-size: 0;
		line-height: normal;
		padding: 0;
		margin: 0;
		box-shadow: none;
		border-radius: 0;
		position: inherit;
		border-left: 1rpx solid #e3e3e3;
		width: 110rpx;
	}

	.bar-bottom-btn:after {
		display: none;
	}

	.bar-bottom-btn:first-child {
		border-left: none;
	}

	.bar-bottom-btn.button-hover {
		background: rgba(255, 255, 255, 0.85);
	}

	.bar-bottom-btn view {
		text-align: center;
		width: 100%;
	}

	.bar-bottom-btn image {
		width: 38rpx;
		height: 38rpx;
		margin-bottom: 0rpx;
	}

	.bar-bottom-btn text {
		font-size: 8pt;
		color: #888;
		display: block;
	}

	.bar-bottom .add-cart {
		background: #f39800;
		color: #fff;
	}

	.bar-bottom .buy-now {
		background: #ff4544;
		color: #fff;
	}

	._negotiable {
		height: 100%;
		width: 100%;
		background: none !important;
		border: none !important;
		border-radius: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		line-height: inherit !important;
		font-family: inherit !important;
		color: inherit !important;
	}

	._negotiable:before,
	._negotiable:after {
		border-radius: 0 !important;
		border: none !important;
	}

	.goods_info_box {
		background: #fff;
		padding: 32rpx 24rpx;
		border-bottom: 1rpx solid #eee;
	}

	.goods_info_box .goods_name {
		font-weight: bold;
		margin-bottom: 24rpx;
		line-height: 1.7;
	}

	.quick_goods_info {
		height: 105rpx;
	}

	.quick_goods_info .view1 {
		float: left;
	}

	.quick_goods_info .view1 .renminbi {
		font-size: 11pt;
		color: #ff4544;
	}

	.quick_goods_info .view1 .img {
		width: 94rpx;
		height: 40rpx;
		margin-left: 16rpx;
	}

	.quick_goods_info .view1 .is_member {
		color: red;
	}

	.quick_goods_info .view2 {
		margin-right: 32rpx;
	}

	.quick_goods_info .view3 .sales {
		font-size: 9pt;
		color: #888;
	}

	.quick_goods_info .view3 .sales_title {
		font-size: 9pt;
		color: #888;
	}

	.quick_goods_info .good_num {
		width: 80rpx;
		text-align: center;
	}

	.quick_goods_info .goods_price {
		font-size: 16px;
		color: #ff4544;
	}

	.quick_goods_info .original_price {
		font-size: 9pt;
		color: #888;
		text-decoration: line-through;
	}

	.quick_goods_info .add {
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 28rpx;
		background: #ff4544;
		color: #fff;
		font-size: 13px;
		float: right;
		margin-top: 20rpx;
	}

	.quick_goods_info .xuanguige {
		width: 142rpx;
		height: 50rpx;
	}

	.quick_goods_info .add_cart {
		width: 192rpx;
		height: 56rpx;
	}

	.quick_goods_info .guigenum {
		position: absolute;
		width: 35rpx;
		height: 25rpx;
		border-radius: 40%;
		border: 1rpx solid red;
		color: red;
		background: #fff;
		font-size: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 70rpx;
		margin-top: -46rpx;
	}

	.quick_goods_info .btn_car_num {
		height: 100%;
		float: right;
		font-size: 15px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 32rpx;
	}

	.quick_goods_info .btn_car_num .carStandard {
		border-radius: 100%;
		height: 44rpx;
		float: right;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.quick_goods_info .member_price_box {
		font-size: 9pt;
		color: #ff4544;
		text-decoration: none;
		height: 100%;
	}

	.quick_goods_info .member_price_title {
		background-color: #feeeee;
		margin-right: 16rpx;
	}

	.store_goods_info .view1 {
		margin-right: 32rpx;
	}

	.store_goods_info .view1 .renminbi {
		font-size: 9pt;
		padding-top: 18rpx;
		color: #ff4544;
	}

	.store_goods_info .view1 .min_price {
		font-size: 16pt;
		color: #ff4544;
	}

	.store_goods_info .view1 .is_member {
		color: red;
	}

	.store_goods_info .view1 .img {
		width: 94rpx;
		height: 40rpx;
		margin-left: 16rpx;
	}

	.store_goods_info .view2 {
		margin-right: 32rpx;
	}

	.store_goods_info .original_price {
		font-size: 9pt;
		color: #888;
		text-decoration: line-through;
	}

	.store_goods_info .member_price_box {
		font-size: 9pt;
		color: #ff4544;
		text-decoration: none;
		height: 100%;
	}

	.store_goods_info .member_price_title {
		background-color: #feeeee;
		margin-right: 16rpx;
	}

	.store_goods_info .sales {
		font-size: 9pt;
		color: #888;
	}

	.store_goods_info .share_btn {
		line-height: normal;
		padding: 0 10rpx;
		border: none;
		background: none;
		border-radius: 0;
		box-shadow: none;
		display: inline-block;
		font-size: 8pt;
	}

	.store_goods_info .share_btn .img {
		width: 40rpx;
		height: 40rpx;
	}

	.store_goods_info .share_btn .share {
		color: #888;
	}

	.check-list {
		padding: 32rpx 24rpx 12rpx 24rpx;
		flex-wrap: wrap;
	}

	.check-item {
		margin-right: 32rpx;
		font-size: 9pt;
		margin-bottom: 20rpx;
	}

	.check-item image {
		width: 34rpx;
		height: 34rpx;
		margin-right: 8rpx;
	}

	.select_attrs {
		background: #fff;
		padding: 0 24rpx;
		margin-bottom: 20rpx;
		height: 100rpx;
	}

	.select_attrs .attrs {
		margin-left: 40rpx;
		font-size: 9pt;
		color: #888;
	}

	.select_attrs .img {
		width: 16rpx;
		height: 26rpx;
	}

	.original-price {
		font-size: 8pt;
		color: #707070;
	}

	.group-descount {
		font-size: 7pt;
	}

	.group-descount-one {
		padding: 5rpx 12rpx;
		background-color: #feeeee;
	}

	.group-descount-center {
		width: 6rpx;
	}

	.group-descount-tow {
		padding: 5rpx 12rpx;
		background-color: #feeeee;
	}

	.mch_shop {
		background: #fff;
		margin-bottom: 20rpx;
		padding: 24rpx;
	}

	.mch_shop .img_box {
		padding-right: 24rpx;
	}

	.mch_shop .img_box .logo {
		width: 80rpx;
		height: 80rpx;
		border: 1rpx solid #eee;
	}

	.mch_shop .name {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.mch_shop .shop_info {
		font-size: 9pt;
		color: #888;
	}

	.mch_shop .goods_num {
		margin-right: 30rpx;
	}

	.mch_shop .enter_shop {
		border: 1rpx solid #e3e3e3;
		border-radius: 8rpx;
		padding: 10rpx 20rpx;
		font-size: 9pt;
		color: #888;
		display: inline-block;
	}

	.modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 1);
		z-index: 9999;
	}

	.modal video {
		width: 100%;
		height: 430rpx;
	}

	.share-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 1000;
		transform: translateY(100%);
		transition: background 250ms;
	}

	.share-modal .share-modal-body {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #f2f2f2;
		padding-top: 60rpx;
		transform: translateY(100%);
		transition: transform 250ms;
	}

	.share-modal.active {
		transform: translateY(0);
		background: rgba(0, 0, 0, 0.5);
	}

	.share-modal.active .share-modal-body {
		transform: translateY(0);
	}

	.share-modal .share-bottom {
		text-align: center;
		font-size: 9pt;
		margin: 0;
		padding: 0;
		margin-bottom: 60rpx;
		line-height: inherit;
		border: none;
		background: none;
		color: inherit;
		font-family: inherit;
		display: inline-block;
	}

	.share-modal .share-bottom:after {
		display: none;
	}

	.share-modal .share-bottom image {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 12rpx;
		border-radius: 999rpx;
		border: 1rpx solid #eee;
	}

	.share-modal .share-bottom:active image {
		opacity: 0.7;
	}

	.share-modal .share-modal-close {
		background: #fff;
		height: 100rpx;
		border-top: 1rpx solid #eee;
	}

	.goods-qrcode-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
		background: rgba(0, 0, 0, 0.5);
		padding: 40rpx;
		transform: translateY(100%);
		opacity: 0.5;
		transition: opacity 250ms;
		visibility: hidden;
	}

	.goods-qrcode-body {
		background: #fff;
		height: 100%;
		border-radius: 10rpx;
	}

	.goods-qrcode-modal.active {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}

	.goods-qrcode-modal .goods-qrcode-box {
		height: 100%;
		position: relative;
		box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.15);
	}

	.goods-qrcode-modal .goods-qrcode-loading {
		top: 0;
		left: 0;
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.goods-qrcode-modal .goods-qrcode {
		top: 0;
		left: 0;
		position: absolute;
		width: 100%;
		height: 100%;
		background: #fff;
		display: none;
	}

	.goods-qrcode-modal .goods-qrcode.active {
		display: block;
	}

	.goods-qrcode-modal .goods-qrcode-close {
		position: absolute;
		top: 40rpx;
		right: 40rpx;
		padding: 15rpx;
	}

	.hide {
		display: none;
	}

	.step-icon {
		height: 44rpx;
		width: 44rpx;
		margin-right: 16rpx;
	}

	.attr-picker {
		position: fixed;
		bottom: 110rpx;
		left: 0;
		z-index: 999;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
	}

	.attr-picker .content-box {
		width: 100%;
		background: #fff;
		position: fixed;
		bottom: 110rpx;
	}

	.attr-picker .attr-group {
		margin-bottom: 6rpx;
	}

	.attr-picker .attr-group-name {
		margin-bottom: 20rpx;
	}

	.attr-picker .attr-item {
		display: inline-block;
		margin: 0 30rpx 30rpx 0;
		background: #f7f7f7;
		border-radius: 10rpx;
		padding: 15rpx 30rpx;
	}

	.attr-picker .attr-item.active {
		background: #ff4544;
		color: #fff;
	}

	.attr-picker .goods-pic-box {
		position: relative;
		width: 200rpx;
	}

	.attr-picker .goods-pic-box image {
		position: absolute;
		top: -90rpx;
		border: 5rpx solid #fff;
		background:#fff;
		width: 200rpx;
		height: 200rpx;
		border-radius: 5rpx;
		box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
	}

	.attr-picker .attr_num_0 {
		color: #c5c5c5;
	}

	.attr-picker .number-input-box {
		height: 70rpx;
	}

	.attr-picker .number-input-box .number-input {
		height: 70rpx !important;
		border: none;
		text-align: center;
		width: 120rpx;
		background: #eee;
		margin: 0 4rpx !important;
	}

	.attr-picker .number-input-box .number-btn {
		height: 100% !important;
		width: 70rpx;
		background: #eee;
	}

	.attr-picker .number-input-box .number-btn.disabled {
		background: #f6f6f6;
		color: #aaa;
	}

	.attr-picker .is_member_price {
		font-size: 7pt;
	}

	.cart-nav {
		position: fixed;
		top: 180rpx;
		right: 24rpx;
		background: rgba(255, 255, 255, 0.5);
		font-size: 0;
		padding: 20rpx;
		border-radius: 999rpx;
		box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
		z-index: 100;
	}

	.cart-nav image {
		width: 42rpx;
		height: 42rpx;
	}

	.parameter {
		flex-wrap: wrap;
	}

	.parameter .item {
		width: 50%;
		font-size: 12px;
		color: #999;
		margin-top: 15rpx
	}

	.box2 {
		background: #fff;
		padding: 20rpx;
		margin-top: 20rpx;
	}

	.box2 .name {
		font-size: 1rem;
		margin-bottom: 30rpx;
	}

	.box2 .item {
		font-size: 0.85rem;
	}

	.box2 .item .dot {
		margin-right: 10rpx;
	}

	.box2 .item .num {
		font-size: 0.75rem;
		color: #b9b9b9;
		margin-right: 20rpx;
	}

	.box2 .item .price {
		font-size: 0.95rem;
		font-weight: 700;
	}

	.box2 .line {
		margin-bottom: 25rpx;
	}

	.box3 {
		background: #fff;
		padding: 20rpx;
		margin-top: 20rpx;
		font-size: 0.85rem;
	}

	.box3 .name {
		font-size: 1rem;
		margin-bottom: 30rpx;
	}

	.box3 .item {
		margin: 0 30rpx 30rpx
	}

	.box3 .item .dot {
		position: absolute;
		margin-left: -19rpx;
	}

	.box3 .item .text:last-child {
		margin-bottom: 0;
	}
</style>
